@()(implicit session: Session)

@config.main("RNA-Seq") {
    <link rel="stylesheet" media="screen" href="@routes.Assets.versioned("mscroll/css/lz_index.css")">

    <div class="body-box">
        <div class="page-box">

            @config.subTitle("RNA-Seq")

            <div class="main-body">

                @components.navUlComponents(
                    Seq(("geneId", "Search By Gene ID", searchForm("Gene ID", "ids", "geneIdForm")),
                        ("range", "Search By Range", rangeForm),
                    ), "geneId")


                <div id="result" class="result">
                    <hr/>

                    <h5>Result:</h5>

                    @components.scrollComponents("Expression level heatmap of gene cluster" ) {
                        <div id="heatmap" style="width: 100%;
                            margin: 0 auto"></div>
                    }

                    @components.scrollComponents("Linechart of  genes" ) {
                        <div id="line" style="width: 100%;
                            margin: 0 auto"></div>
                    }

                    @components.scrollComponents("Expression values of  genes" ) {
                        <div style="width: 100%;">

                        <table class="table table-hover" id="table" data-pagination="true"
                        data-page-list="[10]">

                        </table>
                        </div>

                    }



                </div>
            </div>
        </div>
    </div>
    <script src="@routes.Assets.versioned("mscroll/js/mscroll.js")" type="text/javascript"></script>

    <script src="@routes.Assets.versioned("Highcharts-9.0.1/highcharts.js")" type ="text/javascript"></script>
    <script src="@routes.Assets.versioned("Highcharts-9.0.1/highcharts-more.js")" type ="text/javascript"></script>
    <script src="@routes.Assets.versioned("Highcharts-9.0.1/modules/exporting.js")" type ="text/javascript"></script>
    <script src="@routes.Assets.versioned("Highcharts-9.0.1/modules/data.js")" type ="text/javascript"></script>
    <script src="@routes.Assets.versioned("Highcharts-9.0.1/modules/heatmap.js")" type ="text/javascript"></script>
    <script>

            $(function () {

                formValidation()
                getChr()

            })

            function getEg(name) {
                let eg =   "snap_masked-HiC_scaffold_9-processed-gene-595.11,snap_masked-HiC_scaffold_9-processed-gene-60.0,snap_masked-HiC_scaffold_9-processed-gene-693.16,snap_masked-HiC_scaffold_9-processed-gene-710.7,snap_masked-HiC_scaffold_9-processed-gene-725.15,snap_masked-HiC_scaffold_9-processed-gene-732.13, snap_masked-HiC_scaffold_9-processed-gene-76.10, snap_masked-HiC_scaffold_9-processed-gene-798.6, snap_masked-HiC_scaffold_9-processed-gene-847.14"
                $(`#${name}ids`).val(eg)
            }

            function getStart() {
                $("#start").val("1")
            }

            function getEnd() {
                $("#end").val("2000000")
            }

            function getChr() {
                $("#chr").select2({data: ["HiC_scaffold_1","HiC_scaffold_2","HiC_scaffold_3","HiC_scaffold_4","HiC_scaffold_5",
                        "HiC_scaffold_6","HiC_scaffold_7","HiC_scaffold_8","HiC_scaffold_9","HiC_scaffold_10","HiC_scaffold_11",
                        "HiC_scaffold_12","HiC_scaffold_13","HiC_scaffold_14","HiC_scaffold_15"]})
            }


            function Search(formId) {
                let form = $("#" + formId)
                let fv = form.data("formValidation");
                fv.validate();
                if (fv.isValid()) {
                    let index = MyTable.prototype.runningIcon();
                    $.ajax({
                        url: "/COADB/tools/getGeneExprData?formId=" + formId,
                        type: "post",
                        data: form.serialize(),
                        success: (data) => {
                            $("#table").bootstrapTable("destroy");
                            let columns =[]
                            $.each(data.header,(i,v)=>{
                                columns.push({
                                    field:`${i}`,
                                    title:v,
                                    sortable:true
                                })

                            })


                            $("#table").bootstrapTable({
                                data:data.table,
                                columns:columns
                            });

                            heatmap(data.heatmap)
                            plotLine(data.line)
                            let $result = $("#result")
                            $result.show();
                            layer.close(index)
                            let target_top = $result.offset().top ;
                            $("html,body").animate({scrollTop: target_top}, 800);
                        }
                    })
                }
            }

            function formValidation() {
                let queryText = {
                    validators: {
                        notEmpty: {
                            message: 'This is not be empty!'
                        }
                    }
                }
                let integer = {
                    validators: {
                        notEmpty: {
                            message: 'Word size is required！'
                        },
                        integer: {
                            message: 'Word size must be intger！'
                        }
                    }
                }
                $('#geneIdForm').formValidation({
                    framework: 'bootstrap',
                    icon: {
                        valid: 'glyphicon glyphicon-ok',
                        invalid: 'glyphicon glyphicon-remove',
                        validating: 'glyphicon glyphicon-refresh'
                    },
                    fields: {
                        ids: queryText
                    }
                });
                $('#rangeForm').formValidation({
                    framework: 'bootstrap',
                    icon: {
                        valid: 'glyphicon glyphicon-ok',
                        invalid: 'glyphicon glyphicon-remove',
                        validating: 'glyphicon glyphicon-refresh'
                    },
                    fields: {
                        start: integer,
                        end: integer
                    }
                });

            }

            function heatmap(data) {
                Highcharts.chart('heatmap', {
                    credits: {
                        enabled: false
                    },
                    data: {
                        csv: data.csv,
                    },
                    exporting: {
                        buttons: {
                            contextButton: {
                                menuItems: ["downloadPNG", "downloadJPEG", "downloadPDF", "downloadSVG"]
                            }
                        }
                    },
                    chart: {
                        type: 'heatmap',
                        height:800,
                        margin: [60, 10, 250, 150],
                        zoomType:'xy'
                    },
                    title: {
                        text: "Expression level heatmap of gene cluster"
                    },
                    xAxis: {
                        categories: data.xAxis,
                        //  startOnTick: true,
                        labels: {
                            align: 'right',
                            rotation: -90,
                            style: {
                                fontSize: '12px',
                                fontFamily: 'Arial, sans-serif'
                            }
                        }
                    },
                    yAxis: {
                        categories: data.yAxis,
                        title: "Gene",
                        endOnTick: false,
                        gridLineWidth: 0,
                        minorGridLineWidth: 0,
                        // showLastLabel:true
                    },
                    colorAxis: {
                        stops: [
                            [0.1, '#355F8D  '],
                            [0.5, '#2CA981'],
                            [1, '#F1E628']
                        ],
            /*            min: data.min,
                        max: data.max,*/
                    },
                    legend: {
                        title: {
                            style: {
                                fontWeight: '1',
                                color: '#555',
                                fontSize: '12px'
                            },
                            text: 'Expression(log2(TPM+1))'
                        }
                    },
                    tooltip: {
                        formatter: function () {
                            return  '<b>' +data.xAxis[this.point.x] + '</b><br/>' +  '<b>Gene:</b>' +
                                    data.yAxis[this.point.y] + '<br><b>Expression(log2(TPM+1)): ' + this.point.value + '</b> '
                                     ;
                        }
                    },
                    series: [{
                        borderWidth: 1,
                        turboThreshold: Number.MAX_VALUE // #3404, remove after 4.0.5 release
                    }]
                });
            }

            function plotLine(data){
                Highcharts.chart('line', {
                    title: {
                        text: 'Linechart of  genes'
                    },
                    credits: {
                        enabled: false
                    },
                    xAxis: {
                        categories: data.xAxis,
                        //  startOnTick: true,
                        labels: {
                            align: 'right',
                            rotation: -90,
                            style: {
                                fontSize: '12px',
                                fontFamily: 'Arial, sans-serif'
                            }
                        }
                    },
                    yAxis: {
                        title: {
                            text: 'Expression'
                        }
                    },
                    legend: {
                        layout: 'vertical',
                        align: 'right',
                        verticalAlign: 'middle'
                    },
                    plotOptions: {
                        series: {
                            label: {
                                connectorAllowed: false
                            }

                        }
                    },
                    tooltip: {
                        shared: true,
                        crosshairs: true,

                    },
                    series:  data.series,
                    responsive: {
                        rules: [{
                            condition: {
                                maxWidth: 500
                            },
                            chartOptions: {
                                legend: {
                                    layout: 'horizontal',
                                    align: 'center',
                                    verticalAlign: 'bottom'
                                }
                            }
                        }]
                    }
                });
            }
    </script>
}

@searchForm(title: String, name: String, formId: String) = {
    <form class="registration-form col-sm-12 my-form" id="@formId">


        <div class="col-sm-12 form-group my-position">
            <label class="col-sm-2 my-position-title">@title :</label>
            <div class="col-sm-9">
                <textarea class="form-control" type="text" rows="5" name="@name" id="@{
                    formId + name
                }"></textarea>
                <span  >
                    e.g.,&nbsp;<a href="####" onclick="getEg('@formId')"><em class="egCrics">Example</em></a></span>
            </div>
        </div>

        @components.button(formId)
    </form>
}

@rangeForm = {
    <form class="registration-form col-sm-12 my-form" id="rangeForm">


        @components.chr(selectBox = "4")

        <div class="col-sm-12 form-group my-position">
            <label class="col-sm-2 my-position-title">Start Position:</label>
            <div class="col-sm-4" style="text-align: left">
                <input class="form-control" name="start" id="start">
            </div>
            <div class="col-sm-4" style="line-height: 40px">
                <span >
                    e.g.,&nbsp;<a href="#" onclick="getStart()"><em class="egCrics">1</em></a></span>
            </div>

        </div>

        <div class="col-sm-12 form-group my-position">
            <label class="col-sm-2 my-position-title">End Position:</label>
            <div class="col-sm-4" style="text-align: left">
                <input class="form-control" name="end" id="end">
            </div>
            <div class="col-sm-4" style="line-height: 40px">
                <span  >
                    e.g.,&nbsp;<a href="#" onclick="getEnd()"><em class="egCrics">2000000</em></a></span>
            </div>
        </div>

        @components.button("rangeForm")
    </form>
}
